<template>
	<view class="content">
		<baidu-map class="bm-view" :center="center" @ready="handler">

		</baidu-map>
		<view class="image">
			<img src="../../static/images/z.jpg" alt="" srcset="">
		</view>
		<view class="main">
			<view class="add-shouhuo">
				添加收货信息
				<span class="red">
					&nbsp;*
				</span>
			</view>
			<view class="add-msg">
				<view class="box1" @click="confrimAddress">
					<view class="circle">

					</view>
					<input class="ipt" type="text" placeholder-class="phcolor" placeholder="请输入姓名"
						v-model="formData.userName" style="width: 100%;">
				</view>
				<view class="box1" @click="confrimAddress">
					<view class="circle">

					</view>
					<input class="ipt" type="text" placeholder-class="phcolor" placeholder="请输入地址"
						v-model="formData.recycleAddress" style="width: 100%;">
				</view>
				<view class="box1" @click="confrimSite">
					<view class="circle">

					</view>
					<input class="ipt" placeholder-class="phcolor" placeholder="请选择站点" v-model="formData.siteName"
						style="width: 85%;">
					<u-icon name="map" @click="confrimSite"></u-icon>
				</view>
				<view class="recovery">
					<view class="box2">
						<img src="../../static/images/phone.png" alt="" srcset="" class="pad" style="width: 32rpx;
								height: 32rpx;margin-left: 3rpx;">
						<view class="text" @click="confrimAddress" style="width: 250rpx;">
							<input class="ipt" type="text" placeholder-class="phcolor" placeholder="联系电话"
								v-model.trim="formData.userMobile">
							<view class="verify-phone-number" v-if="rules.verifyPhoneNumberFalse == false">
								请输入正确的联系电话
							</view>
						</view>
						<view class="line">

						</view>
					</view>
					<view class="box2" style="width: 70%;">
						<img src="../../static/images/time.png" alt="" srcset="" class="mg"
							style="width: 32rpx;height: 30rpx;padding-left: 36rpx;">
						<view @click="showTim" :class="formData.time == '选择预约时间' ? 'text1' : 'text2'">
							{{formData.time}}
						</view>
						<!-- 选择预约时间弹层 -->
						<u-popup :show="showTime" :round="10" mode="bottom" :closeable="true" @close="close"
							@open="open" class="popup-show">
							<view class="popup1">
								<view class="top">
									选择预约时间
								</view>
								<view class="middle">
									<view class="left">
										<view class="box" v-for="(item,index) in needTime" :key="index"
											:class="{ active: item.active }" @click="toggleActive(index,item.time)">
											{{item.time}}
										</view>
									</view>
									<view class="right">
										<view class="popopBox">
											<scroll-view scroll-y="true" class="scroll" scroll-with-animation="true"
												v-if="needSMTime.length > 0">
												<view class="">
													<view v-for="(item,index) in needSMTime" :key="index" class="pad"
														:class="{ activeSM: item.active }"
														@click="toggleSMTimeActive(index,item.time)">
														<view class="">
															{{item.time}}
														</view>
													</view>
												</view>
												<!-- <view class="" v-else>
													请选择其他的时间段
												</view> -->
											</scroll-view>
											<scroll-view scroll-y="true" class="scroll" scroll-with-animation="true"
												v-else>
												<view class="">
													今日呼叫回收时间段已预约完,请选择其他时间段
												</view>
											</scroll-view>
										</view>
									</view>
								</view>
							</view>

						</u-popup>
					</view>
				</view>

				<view class="box1" style="display: flex;justify-content: space-between;">
					<view class="ipt">
						添加回收物品
					</view>
					<view class="btn" @click="showModal">
						添加
					</view>
				</view>
			</view>
			<!-- 多选内容显示 -->
			<view v-if="columns.filter(p => p.flag).length > 0" class="Choice">
				<div style="opacity: 0.45;">已选收货类型</div>
				<view class="flx">
					<div class="con" style="align-items: center;" v-for="(item, index) in columns.filter(p => p.flag)"
						:key="index">
						<p style="display: flex;align-items: center;">{{ item.typeName }} -<view
								style="position: relative;" class="text">
								<input class="ipt" placeholder-class="phcolor" type="text" placeholder="请输入重量"
									@input="checkNum($event,item.typeId)" />
								<view class="verify-phone-number"
									v-if="rules.weightFlag == false&& item.typeId==showTypeId && item.unit !='件'">
									重量不能低于20公斤
								</view>
								<view class=" verify-phone-number"
									v-if=" rules.isNum == false && item.typeId==showTypeId">
									请输入数字
								</view>
							</view>
							{{ item.unit }}
						</p>
						<view
							style="border: 1px solid red; height: 40rpx;width: 40rpx;border-radius: 50%;display: flex;justify-content: center;align-items: center;">
							<u-icon @click="delTypeListData(item.typeId)" name="minus" color="red" size="12"></u-icon>
						</view>
					</div>
				</view>

			</view>
			<view class="" style="margin-top: 20rpx;">
				<uni-file-picker limit="1" title="" @select="selectImg" @delete="deletePic" :sizeType="sizeType"
					:value="fileList1"></uni-file-picker>
			</view>
			<view class="error">
				<img src="../../static/images/error.png" alt="" srcset="">
				<view class="text">
					请务必上传合适的图片
				</view>
			</view>
			<view class="textarea">
				<!-- maxlength="-1"输入字数不受限制 -->
				<textarea @input="iptShortDesc" v-model="formData.shortDesc" name="" id=""
					placeholder="描述一下出售物品的新旧程度、型号、品牌等，回收人员会跑的更快哦~" maxlength="-1"
					placeholder-class="phcolor"></textarea>
			</view>
			<view class="call " @click="call">
				确认呼叫
			</view>
			<u-modal :show="show" @confirm="confirmPup" @cancel="cancelPup" :showCancelButton="true" ref="uModal" confirmColor="#A16F38">
				<u-checkbox-group placement="column">
					<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in columns" :key="index"
						@change="checkboxChange(item.typeId)"
						:label="`${item.typeName} ${item.basicScore}分/${item.unit}`" :checked="item.flag"
						activeColor="#A16F38" 
						shape="circle"
						>
					</u-checkbox>
				</u-checkbox-group>
			</u-modal>
		</view>

	</view>

</template>

<script>
	import request from '../../utils/request.js'
	import OSS from 'ali-oss'
	export default {
		data() {
			return {
				// callColorFlag:false, //控制呼叫按钮的颜色
				show: false,
				conLists: [],
				//定义前端选中的值
				selectList: "",
				selectId: [],
				center: {
					lng: '',
					lat: ''
				},
				showType: false,
				showTime: false,
				timeValue: Number(new Date()),
				typeName: '选择回收类型',
				formData: {
					time: '选择预约时间',
					recycleAddress: '',
					unit: '',
					userMobile: '',
					reservationDay: '',
					reservationHour: '',
					userName: '',
					shortDesc: '',
					siteName: '',
					imgUrl: '',
					name: ''
				},
				columns: [],
				fileList1: [],
				rules: {
					verifyPhoneNumberFalse: true,
					weightFlag: true,
					isNum: true
				},
				lat: '',
				lng: '',
				addressList: [],
				page: 1,
				limit: 5,
				flag: false,
				sizeType: ['compressed'],
				selectData: {},
				Num: 0,
				ReservationDay: 0,
				ReservationHour: 0,
				ImgUrl: [],
				ShortDesc: '',
				scrollTop: 0,
				needTime: [{
						time: this.beforetime1(0, 1),
						active: false
					},
					{
						time: this.beforetime1(1, 1),
						active: false,
					},
					{
						time: this.beforetime1(2, 1),
						active: false
					},
				],
				needSMTime: [{
						time: '08:00-12:00',
						active: false,
						hidden: false
					},
					{
						time: '13:00-18:00',
						active: false,
						hidden: false
					}
				],
				hour: '',
				day: '',
				obj: {
					typeId: '',
					typeName: '',
					num: '',
					unit: ''
				},
				typeListData: [],
				//↓初始化数据，不写会报错
				gwPartsDetectionList: [{
					deName: '',
					deAmount: ''
				}],
				//让前端界面遍历用的数组
				otherDetectionList: [],
				showTypeId: 0
			}
		},
		methods: {
			showModal() {
				this.show = true;
			},
			cancelPup() {
				this.show = false;
			},
			confirmPup() {
				// 3秒后自动关闭
				this.show = false;
			},
			checkboxChange(id) {
				this.showTypeId = 0
				let index = this.columns.findIndex(i => i.typeId == id)
				this.columns[index].flag = !this.columns[index].flag
				delete this.columns[index].num

			},
			delTypeListData(id) {
				this.showTypeId = 0
				let index = this.columns.findIndex(i => i.typeId == id)
				this.columns[index].flag = false
				delete this.columns[index].num
			},
			handler({
				BMap,
				map
			}) {
				let that = this
				var latitude;
				var longitude;
				ihgAppJssdk.map.getLocation({
					success: function(res) {
						latitude = JSON.parse(res).latitude
						longitude = JSON.parse(res).longitude
					}
				})
			},
			// 在组件初始化或需要更新时间段的地方调用这个方法
			updateTimeSlotsVisibility() {
				const now = new Date();
				const currentHour = now.getHours();
				const currentMinute = now.getMinutes();
				// 更新后两日的时间段可见性
				for (let i = 1; i < 3; i++) {
					this.needTime.push({
						time: this.beforetime1(i, 1),
						active: false
					});
					this.needTime.splice(3)
					// 根据当前时间判断是否显示后两日的时间段
					if (currentHour < 12) {
						this.needSMTime = [{
							time: '13:00-18:00',
							active: false,
							hidden: false
						}];
					}
					if (currentHour > 12) {
						this.needSMTime = [];
					}
				}
			},
			// 高亮显示
			toggleActive(index, time) {
				this.formData.reservationDay = time
				this.day = time
				uni.setStorageSync('day', this.day);
				this.needTime.forEach((item, i) => {
					item.active = i === index ? !item.active : false;
				});
				if (index == 0) {
					this.updateTimeSlotsVisibility()
				}
				if (index == 1 || index == 2) {
					this.needSMTime = [{
							time: '08:00-12:00',
							active: false,
							hidden: false
						},
						{
							time: '13:00-18:00',
							active: false,
							hidden: false
						}
					]
				}


			},
			// 高亮显示
			toggleSMTimeActive(index, time) {
				this.formData.reservationHour = time
				this.hour = time
				uni.setStorageSync('hour', this.hour);
				this.formData.time = this.day + ' ' + this.hour
				uni.setStorageSync('time', this.formData.time);
				// 切换项目的 active 状态
				this.needSMTime.forEach((item, i) => {
					item.active = i === index ? !item.active : false;
				});
				this.showTime = false
			},
			// 在组件的生命周期钩子中，或者需要显示时间段的地方调用该方法
			showCurrentAndFutureTimeSlots() {
				const now = new Date();
				const currentYear = now.getFullYear();
				const currentMonth = now.getMonth() + 1; // 月份从0开始，所以要加1
				const currentDate = now.getDate();

				// 遍历时间段，将所有时间段隐藏
				this.needSMTime.forEach(item => {
					item.hidden = true;
				});
			},
			parseTimeRange(timeRange) {
				const [start, end] = timeRange.split('-');
				const [startHour, startMinute] = start.split(':').map(Number);
				const [endHour, endMinute] = end.split(':').map(Number);
				return [startHour, startMinute, endHour, endMinute];
			},
			iptShortDesc(e) {
				this.ShortDesc = e.detail.value
				uni.setStorageSync('ShortDesc', this.ShortDesc);
			},
			// 查询回收物品类型
			getItemType() {
				let that = this
				var latitude;
				var longitude;
				ihgAppJssdk.map.getLocation({
					success: function(res) {
						latitude = JSON.parse(res).latitude
						longitude = JSON.parse(res).longitude
						that.formData.lng = longitude
						that.formData.lat = latitude
						request.get('/api/recycle/score/list', {
							lat: latitude,
							lng: longitude,
							companyId: that.formData.companyId,
							// state:1
						}).then(res => {
							if (res.code == 0) {
								var data = res.data
								data = res.data.map(item => {
									if (item.state == true) {
										return {
											// id: item.typeId,
											// label: item.typeName + ' ' + item.basicScore +
											// 	'积分' +
											// 	'/' + item.basicNum + item.unit,
											// // title: item.typeName + ' ' + item.basicScore +
											// // 	'积分' +
											// // 	'/' + item.basicNum + item.unit,
											// unit: item.unit,
											// // selected: false,
											...item,
											num: 0,
											flag: false
										};
									} else {
										return null;
									}
								}).filter(item => item !== null);
								data.reverse()
								// that.columns.push(data)
								that.columns = data
							
							} else {
								// uni.showToast({
								// 	title: res,
								// 	icon: 'none',
								// 	duration: 2000
								// })
							}
						})
					}
				})

			},
			checkNum(e, id) {
				this.isNumberGreaterThanTwenty(e.target.value, id)
				let num = Number(e.target.value);
				let index = this.columns.findIndex(i => i.typeId == id)
				this.columns[index].num = num
			},
			removeDuplicatesKeepLast(arr) {
				const map = {};
				const result = [];
				for (let i = arr.length - 1; i >= 0; i--) {
					const item = arr[i];
					if (!map[item.typeId]) {
						result.unshift(item);
						map[item.typeId] = true;
					}
				}
				return result;
			},
			isNumberGreaterThanTwenty(num, id) {
				this.showTypeId = id
				// 判断输入是否为数字
				if (isNaN(num)) {
					this.rules.isNum = false
					this.rules.weightFlag = true
					return false;
				} else if (!isNaN(num)) {
					// 将输入转换为数字类型
					num = parseInt(num);
					this.rules.weightFlag = true
					// 判断数字是否大于等于20
					if (num >= 20) {
						this.rules.weightFlag = true
						return true;
					} else {
						this.rules.isNum = true
						this.rules.weightFlag = false
						return false;
					}
				}


			},
			confrimAddress() {
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pagesA/address-management/address-management'
				})
			},
			confrimSite() {
				this.columns = []
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pagesA/nearby-branches/recycleSite'
				})

			},
			showTyp() {
				this.showType = true
			},
			showTim(value) {
				this.showTime = true
			},
			open() {

			},
			close() {
				this.showTime = false
			},
			// 回调参数为包含columnIndex、value、values

			call() {
				let list = this.columns.filter(p => p.flag).map(p => {
					return {
						typeId: p.typeId,
						typeName: p.typeName,
						num: p.num,
						unit: p.unit
					}
				})
				this.formData.list = list
				let nameString = list.map(p => p.typeName).join('、');
				this.formData.name = nameString;
				this.formData.totalCount = list.length
				this.formData.totalWeight = list.reduce((pre, cur) => {
					return pre + Number(cur.num); // 返回累加后的值
				}, 0);
				this.formData.unit = '公斤'
				if(uni.getStorageSync('addressInfo').recycleAddress == undefined){
					this.getLocationLat(this.formData.recycleAddress)
				}else{
					this.getLocationLat(uni.getStorageSync('addressInfo').recycleAddress)
				}
                

				let that = this
				if (that.formData.imgUrl == '') {
					uni.showToast({
						title: '请添加图片才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else
				if (that.formData.list.length == '') {

					uni.showToast({
						title: '请选择收货类型才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else if (that.formData.list.some(item => !item.num && !/^[0-9]+.?[0-9]*$/.test(item.num))) {

					uni.showToast({
						title: '请输入数字,并且估计重量在20公斤以上、件数至少一件才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else if (that.formData.list.some(item => item.unit === '公斤' && (item.num < 20))) {
					uni.showToast({
						title: '估计重量在20公斤以上才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else if (that.formData.list.some(item => item.unit === '件' && (item.num < 1))) {

					uni.showToast({
						title: '估计件数至少一件才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else if (that.formData.time == '选择预约时间') {
					// uni.showModal({
					// 	content: '请选择预约时间才能进行呼叫回收',
					// 	success: function(res) {}
					// })
					uni.showToast({
						title: '请选择预约时间才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})
				} else if (that.formData.userName == '' || that.formData.userName == undefined) {
					uni.showToast({
						title: '请填写呼叫人姓名才能进行呼叫回收',
						icon: 'none',
						duration: 2000
					})

				} else {
					uni.showModal({
						content: '你确定要呼叫回收吗？',
						success: function(res) {
							if (res.confirm) {
								request.post('/api/recycle/reservation/add',
									that.formData
								).then(res => {
									if (res.code == 0) {
										uni.showToast({
											title: '呼叫成功',
											icon: 'none',
											duration: 2000
										})
										setTimeout(() => {
											uni.navigateTo({
												//保留当前页面，跳转到应用内的某个页面
												url: '/pagesA/order-record/order-record'
											})
										}, 2000)
										uni.removeStorageSync('addressInfo');
										uni.removeStorageSync('recycleSiteInfo');
										uni.removeStorageSync('Num');
										uni.removeStorageSync('selectData');
										uni.removeStorageSync('ReservationDay');
										uni.removeStorageSync('ReservationHour');
										uni.removeStorageSync('ImgUrl');
										uni.removeStorageSync('ShortDesc');
										uni.removeStorageSync('time');
										uni.removeStorageSync('hour');
										uni.removeStorageSync('day');
									} else {
										uni.showToast({
											title: res.msg,
											icon: 'none',
											duration: 2000
										})
									}
								})
							} else if (res.cancel) {

							}
						}
					});
				}

			},
			// 删除图片
			deletePic(event) {
				this.formData.imgUrl = ''
			},
			havetime(unixtime, type) {
				var date = new Date(unixtime);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				if (type == 2) {
					return y + '' + m + '' + d + '' + h + '' + minute + '' + second; //年月日时分秒
				} else if (type == 3) {
					return y + '' + m
				} else if (type == 4) {
					return y + '' + m + '' + d

				} else if (type == 5) {
					return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
				} else if (type == 6) {
					return y + '-' + m + '-' + d;
				}
			},
			compressEvent(img, callback) {
				let canvasWidth = img.width //图片原始宽高
				let canvasHeight = img.height;
				//图片宽高比
				let base = canvasWidth / canvasHeight;
				//宽度最大设为1024
				if (canvasWidth > 1024) {
					canvasWidth = 1024;
					canvasHeight = Math.floor(canvasWidth / base);
				}
				//绘制图像到画布
				let canvas = document.createElement('canvas');
				let ctx = canvas.getContext("2d");
				canvas.width = canvasWidth;
				canvas.height = canvasHeight;
				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
				//将画布转为base64，mimeType类型为image/jpeg，图片质量为0.3
				let dataURL = canvas.toDataURL("image/jpeg", 0.3);
				callback ? callback(dataURL) : null; //调用回调函数
			},
			// 选择图片
			selectImg(e) {
				this.flag = true
				let that = this
				// const OSS = require('ali-oss');
				let path = e.tempFiles[0].file
				const file = path;
				if (file) {
					that.compressImage(file, 1024, 0.2, (compressedBlob) => {
						const compressedFile = that.blobToFile(compressedBlob, file.name);
						// 这里拿到最终的File对象 compressedFile，可以用于上传等操作
						this.before(e.tempFiles[0].extname, compressedFile)
					});
				}
			},
			/**
			 * 使用uni-file-picker选择图片文件。
               读取图片文件并将其转换为Image对象。
               使用一个Canvas元素来绘制并压缩图片。
               将压缩后的图片从Canvas中导出为Blob对象。
               将Blob转换为File对象。
			 * 
			 */
			blobToFile(blob, fileName) {
				blob.lastModifiedDate = new Date();
				blob.name = fileName;
				return new File([blob], fileName, {
					type: blob.type
				});
			},
			/**
			 * 压缩图片
			 */
			compressImage(file, maxWidth, quality, callback) {
				const reader = new FileReader();
				reader.onload = (e) => {
					const img = new Image();
					img.onload = () => {
						const canvas = document.createElement('canvas');
						const ctx = canvas.getContext('2d');

						let width = img.width;
						let height = img.height;

						if (width > maxWidth) {
							height = Math.round((height *= maxWidth / width));
							width = maxWidth;
						}

						canvas.width = width;
						canvas.height = height;

						ctx.drawImage(img, 0, 0, width, height);

						canvas.toBlob((blob) => {
							callback(blob);
						}, "image/jpeg", quality);
					};
					img.src = e.target.result;
				};
				reader.readAsDataURL(file);
			},
			//  上传图片路径格式为https://oss-token-test.oss-cn-hangzhou.aliyuncs.com/qzzw/202402/2024022917120012345.png 202402为获取当前年月日 20240229171200为获取当前年月日时分秒 12345为随机数
			before(extname, file) {
				let that = this
				var timestamp = new Date().getTime()
				var time = this.havetime(timestamp, 2)
				var timeMonth = this.havetime(timestamp, 3)
				var haveMonthDay = this.havetime(timestamp, 4)
				uni.request({
					url: 'http://sts.ck9696.com/oss/ckOSSServer/getCkOSSToken',
					method: 'post',
					data: {
						'exchangeTime': time,
						'channelId': '1',
						'channelNo': '1',
						'channelPassword': '1',
						'appVersion': '1',
						'appMobileModel': '1'
					},
					success: function(res) {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						})
						res.data.data.bucket = 'oss-token-test'
						res.data.data.endpoint = 'https://oss-cn-hangzhou.aliyuncs.com'
						res.data.data.stsToken = res.data.data.securityToken
						let client = new OSS(res.data.data)
						let storeAs = null
						storeAs = '/bsh/' + timeMonth +
							'/' + time + Math.ceil(Math.random() * 10000) + '.' + extname
						client.put(storeAs, file).then(function(result) {
							that.formData.imgUrl = result.url
							that.ImgUrl = [{
								url: result.url
							}]
							uni.setStorageSync('ImgUrl', that.ImgUrl);

						}).catch(function(err) {
							
						})
					},
					fail: function(res) {
						uni.showToast({
							title: res,
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getRecycleAddressData() {
				let that = this
				request.get('/api/recycle/address/page', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					if (res.code == 0) {
						// this.addressList = res.data.list[0]
						this.formData.userName = res.data.list[0].userName
						this.formData.userMobile = res.data.list[0].userMobile
						this.formData.recycleAddress = res.data.list[0].recycleAddress
						
						
					}
				})
			},
			// 地址解析经纬度
			getLocationLat(address) {
				console.log(address,'address')
				let that = this
				//创建地址解析器实例
				var myGeo = new BMapGL.Geocoder();
				// 将地址解析结果显示在地图上，并调整地图视野
				myGeo.getPoint(address, function(point) {
					if (point) {
						that.formData.lng = point.lng
						that.formData.lat = point.lat
						console.log(point.lng, point.lat, '6666666666666666')
					} else {
						alert('您选择的地址没有解析到结果！');
					}
				})
			},
			getNearbyBranchesData() {
				let that = this
				var latitude;
				var longitude;
				ihgAppJssdk.map.getLocation({
					success: function(res) {
						latitude = JSON.parse(res).latitude
						longitude = JSON.parse(res).longitude
						that.formData.lng = longitude
						that.formData.lat = latitude
						request.get('/api/recycle/site/page', {
							page: that.page,
							limit: that.limit,
							lng: longitude,
							lat: latitude,
							// lng: 120.314124,
							// lat: 30.413321,
						}).then(res => {
							if (res.code == 0) {
								that.formData.siteId = res.data.list[0].siteId
								that.formData.companyId = res.data.list[0].companyId
								that.formData.companyName = res.data.list[0].companyName
								that.formData.siteName = res.data.list[0].siteName
								that.getItemType()
							}
						})
					}
				})
			},
			beforetime1(index, type) {
				let now = new Date();
				//想获取前七天日期就减七，前六天就减六，以此类推
				var date = new Date(now.getTime() + index * 24 * 3600 * 1000);
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				var minute = date.getMinutes();
				var second = date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute;
				second = second < 10 ? ('0' + second) : second;
				let day = date.getDay(); // 获取星期几的数字
				// let weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				// return y + '-' + m + '-' + d + '' + '(' + '' + weekDays[day] + ')';
				// return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second;//年月日时分秒
				// return y + '-' + m + '-' + d + ' ' + h + ':' + minute;
				if (type == 1) {
					// 返回年月日
					return y + '-' + m + '-' + d;
				}
			},
		},
		onLoad(option) {
			this.updateTimeSlotsVisibility()
			let selectData = uni.getStorageSync('selectData')
			if (selectData.typeName) {
				// this.formData.typeName = selectData.typeName
				// this.formData.typeId = selectData.typeId
				// this.formData.unit = selectData.unit

			}
			if (uni.getStorageSync('Num')) {
				// this.formData.num = uni.getStorageSync('Num')
			}
			if (uni.getStorageSync('ReservationDay')) {
				this.formData.reservationDay = uni.getStorageSync('ReservationDay')
				this.formData.reservationHour = uni.getStorageSync('ReservationHour')
				this.formData.time = uni.getStorageSync('ReservationDay') + ' ' + uni.getStorageSync(
					'ReservationHour')
			}
			if (uni.getStorageSync('ImgUrl')) {
				this.formData.imgUrl = uni.getStorageSync('ImgUrl')[0].url
				this.fileList1 = uni.getStorageSync('ImgUrl')
			}
			if (uni.getStorageSync('ShortDesc')) {
				this.formData.shortDesc = uni.getStorageSync('ShortDesc')
			}


			if (uni.getStorageSync('addressInfo').userName == undefined || uni.getStorageSync('addressInfo')
				.userName ==
				null) {
				this.getRecycleAddressData()
			}
			if (uni.getStorageSync('recycleSiteInfo').siteName == undefined || uni.getStorageSync(
					'recycleSiteInfo')
				.siteName == null) {
				setTimeout(() => {
					this.getNearbyBranchesData()
				}, 800)

			}
			if (uni.getStorageSync('addressInfo').userName) {
				this.formData.userName = uni.getStorageSync('addressInfo').userName
				this.formData.userMobile = uni.getStorageSync('addressInfo').userMobile
				this.formData.recycleAddress = uni.getStorageSync('addressInfo').recycleAddress
			}
			if (uni.getStorageSync('recycleSiteInfo').siteName) {
				this.formData.companyId = uni.getStorageSync('recycleSiteInfo').companyId
				this.formData.companyName = uni.getStorageSync('recycleSiteInfo').companyName
				this.formData.siteId = uni.getStorageSync('recycleSiteInfo').siteId
				this.formData.siteName = uni.getStorageSync('recycleSiteInfo').siteName
				setTimeout(() => {
					this.getItemType()
				}, 800)

				var distance = uni.getStorageSync('recycleSiteInfo').distance
				if (distance > 20) {
					uni.showModal({
						showCancel: false,
						content: '您当前位置距离该网点大于20公里,请重新选择距离20公里内网点',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									//保留当前页面，跳转到应用内的某个页面
									url: '/pagesA/nearby-branches/recycleSite'
								})
							} else if (res.cancel) {
								uni.navigateTo({
									//保留当前页面，跳转到应用内的某个页面
									url: '/pagesA/nearby-branches/recycleSite'
								})
							}
						}
					});
				}
			}
			if (uni.getStorageSync('time')) {
				this.formData.reservationDay = uni.getStorageSync('day')
				this.formData.reservationHour = uni.getStorageSync('hour')
				this.formData.time = uni.getStorageSync('time')
			}

		},
		onShow() {
              // this.getRecycleAddressData()
			// setTimeout(() => {
			// 	this.getItemType()
			// }, 800)
		},
		mounted() {
			// 问题描述：uview组件的popup弹出层下页面可以滚动，阻止popup弹层的touchmove事件
			const popup = document.querySelectorAll('.popup-show')
			popup.forEach(item => {
				item.addEventListener('touchmove', e => {
					e.preventDefault()
					e.stopPropagation()
				}, {
					passive: false
				})
			})

		},

	}
</script>

<style lang="scss">
	.text1 {
		font-size: 28rpx;
		margin-left: 4rpx;
		opacity: 0.25;
		color: #000000;
	}

	.text2 {
		font-size: 28rpx;
		margin-left: 4rpx;
		color: #000000;
		opacity: 0.85;
	}

	.red {
		color: red;
		padding-left: 2rpx;
	}

	// uniapp中修改input框中默认字体的颜色
	.phcolor {
		font-size: 28rpx;
		font-weight: 400;
		opacity: 0.25;
		color: #000000;
	}

	input {
		font-size: 28rpx;
		font-weight: bolder;
	}

	.image {
		width: 702rpx;
		height: 250rpx;
		padding: 24rpx 24rpx 0 24rpx;

		img {
			width: 702rpx;
			height: 250rpx;
		}
	}

	.card2 {
		width: 160rpx;
		height: 160rpx;
		background: rgba(0, 0, 0, 0.1);

		//opacity为整个背景的透明度 
		img {
			width: 58rpx;
			height: 58rpx;
			// color: #000000;

		}

		.add {
			color: #000000;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 58rpx;
			line-height: 160rpx;
		}

	}

	.u-upload__button {
		margin: 0;
	}

	.content {
		background-color: #F1F4F9;

		.header {
			display: flex;
			width: 445rpx;
			padding-right: 305rpx;
			height: 176rpx;
			line-height: 176rpx;
			background: #FFFFFF;
			justify-content: space-between;

			.images img {
				padding-left: 24rpx;
			}

			.text {
				height: 35rpx;
				font-size: 28rpx;


				color: #000000;
				line-height: 176rpx;
				opacity: 0.45;
			}
		}

		.main {
			padding: 24rpx 24rpx;

			.saoma {
				width: 702rpx;
				height: 80rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center; //水平居中
				line-height: 80rpx;

				.text {
					padding-left: 31rpx;
					width: 507rpx;
				}

				.images1 {
					width: 50rpx;
					height: 41rpx;
					padding-left: 32rpx;
				}

				.images2 {
					width: 50rpx;
					height: 47rpx;

				}
			}

			.add-shouhuo {
				// width: 213rpx;
				height: 34rpx;
				padding: 24rpx 0 25rpx 0;
				font-family: Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 34rpx;
				opacity: 0.45;

			}


			.add-msg {
				background: #FFFFFF;

				.box1 {
					display: flex;
					align-items: center;
					padding-left: 32rpx;
					height: 91rpx;
					border-bottom: 1rpx solid #EBEBEB;


					.circle {
						width: 16rpx;
						height: 16rpx;
						background: var(--global-bg-color);
						border-radius: 50%;
						margin-right: 31rpx;
					}

				}

				.recovery {
					padding-left: 32rpx;
					border-bottom: 1rpx solid #EBEBEB;
					display: flex;

					.box2 {
						width: 330rpx;
						height: 91rpx;

						display: flex;
						align-items: center;
						// line-height: 91rpx;

						img {
							width: 32rpx;
							height: 32rpx;
							padding-right: 16rpx;
						}

						.mg {
							padding-left: 36rpx;
							width: 32rpx;
							height: 31rpx;
						}

						.text {
							// width: 267rpx;
							font-size: 28rpx;
							color: #000000;
							line-height: 11rpx;
							opacity: 0.85;

						}

						.line {
							width: 1rpx;
							height: 60rpx;
							background: #EBEBEB;
						}
					}
				}
			}

			.textarea {
				margin-top: 24rpx;
				background: #FFFFFF;
				font-size: 28rpx;
				opacity: 0.85;
				width: 640rpx;
				padding: 24rpx 31rpx 24rpx 31rpx;
				word-break: break-all;
				word-wrap: break-word;
			}

			.call {
				margin-top: 24rpx;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				opacity: 0.85;
				background-color: var(--global-bg-color);
				border-radius: 50rpx;

			}

			.add-form {
				margin-top: 24rpx;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-family: Source Han Sans SC;
				font-weight: 500;
				font-size: 36rpx;
				color: #FFFFFF;
				opacity: 0.85;
				background-color: var(--global-bg-color);
				border-radius: 50rpx;
			}

			.opac {
				opacity: 0.45;
			}
		}
	}

	.ipt {
		font-size: 28rpx;
		margin-left: 4rpx;
		font-weight: 400;
		color: #000000;
		opacity: 0.85;
	}

	.error {
		margin-top: 20rpx;
		display: flex;
		align-items: center;

		img {
			width: 24rpx;
			height: 24rpx;
		}

		.text {
			font-family: Source Han Sans SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FF0000;
			opacity: 0.85;
			margin-left: 8rpx;

		}
	}

	.verify-phone-number {
		position: absolute;
		bottom: -70rpx;
		left: 0rpx;
		font-size: 24rpx;
		color: #FF0000;
		opacity: 0.85;
	}

	.popup1 {
		height: 500rpx;

		.top {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-weight: bolder;
			// color: #FFA500;var(--global-bg-color)
			color: var(--global-bg-color);
		}

		.middle {
			display: flex;

			.left {
				width: 42%;
				background-color: #EBEBEB;
				display: flex;
				flex-direction: column;

				.box {

					height: 100rpx;
					text-align: center;
					line-height: 100rpx;
				}
			}

			// < !-- 设置高亮的背景色 --> 
			.active {
				background-color: white;
				color: var(--global-bg-color);
			}

			.activeSM {
				background-color: white;
				color: var(--global-bg-color);
			}

			.right {
				width: 60%;

				.popopBox {
					padding: 0 20rpx;

					.scroll {
						// 上下滑动的关键 设置高
						height: 600rpx;

						.pad {
							height: 100rpx;
							line-height: 100rpx;
							border-bottom: 1rpx solid #EBEBEB;
						}
					}
				}
			}
		}
	}

	.type {
		font-family: Source Han Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		opacity: 0.45;
		padding: 10rpx 0;
	}

	.Choice {

		padding: 24rpx 0 25rpx 0;
		font-family: Source Han Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
		line-height: 34rpx;

		.flx {
			.con {
				display: flex;
				justify-content: space-between;
				width: 95%;
				height: 80rpx;
				background: #FFFFFF;
				margin-top: 20rpx;
				// text-align: center;
				line-height: 80rpx;
				border: 1rpx solid #F1F4F9;
				border-radius: 20rpx;
				padding: 0 20rpx;
			}
		}

	}

	.recovery2 {
		padding-left: 32rpx;
		border-bottom: 1rpx solid #EBEBEB;
		display: flex;
		align-items: center;

		.box2 {
			width: 280rpx;
			height: 91rpx;

			display: flex;
			align-items: center;
			// line-height: 91rpx;

			img {
				width: 32rpx;
				height: 32rpx;
				padding-right: 16rpx;
			}

			.mg {
				padding-left: 36rpx;
				width: 32rpx;
				height: 31rpx;
			}

			.text {
				// width: 267rpx;
				font-size: 28rpx;
				color: #000000;
				line-height: 11rpx;
				opacity: 0.85;

			}

			.line {
				width: 1rpx;
				height: 60rpx;
				background: #EBEBEB;
			}
		}
	}

	.btn {
		background: var(--global-bg-color) !important;
		width: 130rpx;
		height: 50rpx;
		background-color: skyblue;
		border-radius: 15rpx;
		color: white;
		line-height: 50rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 400;
		opacity: 0.85;
		margin-right: 24rpx;
	}
</style>